<template>
  <div class="Header">
    <h1>Header</h1>
    <!--通过 this.$store.state.msg 可以访问到数据 但是这样的方式过于麻烦 -->
    <p>{{ msg }}---{{ num }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  //直接通过使用 mapState 辅助函数帮助我们生成计算属性
  computed: {
    ...mapState(["msg", "num"]),
    /* 展开如下
    msg() {
      return this.$store.state.msg;
    }, */
  },
};
</script>

<style scoped>
.Header {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: cornflowerblue;
}
</style>
